<template>
  <n-modal
    v-model:show="showModal"
    preset="card"
    title="选择图标"
    style="width: 70%"
    :bordered="false"
  >
    <div class="icon-search-container">
      <n-input
        v-model:value="searchText"
        placeholder="搜索图标"
        clearable
        @update:value="handleSearch"
      >
        <template #prefix>
          <n-icon><search-outlined /></n-icon>
        </template>
      </n-input>
    </div>

    <div class="icon-container">
      <n-grid :cols="36" :x-gap="12" :y-gap="12" responsive="screen">
        <n-grid-item
          v-for="(icon, index) in filteredIcons"
          :key="index"
          :span="6"
        >
          <div class="icon-item" @click="handleSelectIcon(icon)">
            <n-icon size="24">
              <component :is="icon.component" />
            </n-icon>
            <div class="icon-name">{{ icon.name }}</div>
          </div>
        </n-grid-item>
      </n-grid>
    </div>

    <template #footer>
      <n-space justify="end">
        <n-button @click="handleCancel">取消</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
import { ref, computed, defineEmits, defineProps } from "vue";
import { NIcon } from "naive-ui";
import { SearchOutlined } from "@vicons/material";
import * as AntdIcons from "@vicons/antd";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:show", "select"]);

const showModal = computed({
  get: () => props.show,
  set: (val) => emit("update:show", val),
});

const searchText = ref("");

// 获取所有 Antd 图标
const allIcons = ref([]);

// 初始化图标列表
const initIcons = () => {
  const icons = [];
  for (const key in AntdIcons) {
    if (Object.prototype.hasOwnProperty.call(AntdIcons, key)) {
      icons.push({
        name: key,
        component: AntdIcons[key],
      });
    }
  }
  allIcons.value = icons;
};

// 初始化图标
initIcons();

// 过滤后的图标列表
const filteredIcons = computed(() => {
  if (!searchText.value) {
    return allIcons.value;
  }
  return allIcons.value.filter((icon) =>
    icon.name.toLowerCase().includes(searchText.value.toLowerCase())
  );
});

// 处理搜索
const handleSearch = (val) => {
  searchText.value = val;
};

// 处理选择图标
const handleSelectIcon = (icon) => {
  emit("select", icon.name);
  showModal.value = false;
};

// 处理取消
const handleCancel = () => {
  showModal.value = false;
};
</script>

<style scoped>
.icon-search-container {
  margin-bottom: 16px;
}

.icon-container {
  max-height: 400px;
  overflow-y: auto;
  padding: 8px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  height: 100%;
}

.icon-item:hover {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
}

.icon-name {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
</style>
